<template>
  <div style="padding: 40px">

    <el-table :data="tableData" border stripe style="width: 100%;" header-align="center" align="center">
      <el-table-column label="通知ID" width="70px"  header-align="center" align="center">
        <template slot-scope="scope">
          {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column prop="courseName" label="课程名称" header-align="center" align="center"/>
      <el-table-column prop="teacherName" label="老师姓名" header-align="center" align="center"/>
      <el-table-column prop="clazzName" label="班级名称" header-align="center" align="center"/>
      <el-table-column prop="credit" label="学分" width="70px"  header-align="center" align="center"/>
      <el-table-column prop="location" label="上课地点"   header-align="center" align="center"/>
      <el-table-column prop="startTime" label="开始时间(小节)"  header-align="center" align="center"/>
      <el-table-column prop="endTime" label="结束时间(小节)" header-align="center" align="center"/>
      <el-table-column fixed="right" label="操作" width="130" header-align="center" align="center">
        <template #default="scope">
          <!-- 编辑按钮  -->
          <el-button type="primary" @click="handleEdit(scope.row)">考勤状态</el-button>

        </template>
      </el-table-column>
    </el-table>


    <!-- 点击编辑的弹窗 -->
    <el-dialog :visible.sync="dialogVisible1" title="创建考勤" width="30%">
      <el-form :model="form1" label-width="120px">
        <el-form-item label="考勤状态">
          <el-select v-model="form1.status" style="width: 50%">
            <el-option label="签到" value="签到"></el-option>
            <el-option label="签退" value="签退"></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible1 = false">取消</el-button>
          <el-button type="primary" @click="saveEdit">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <!--  分页器-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="total,prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </div>

</template>

<script>
import { mapGetters } from 'vuex'
import axios from 'axios';

import {
getStuClassBiaoAll
} from '@/http/categories.js'
import { getTwoKaoAll} from "@/http/userList";

export default {


  data() {
    return {
      form: {
        "teacherName":"",
        "content": "",
        "title": "",
        "type": "",
        "courseId": "",
        "status": "",
        "id":""
      },
form1:{

  "courseId": "",
  "status": "",

},
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      currentPage: 1,
      pageSize: 10,
      total:0,
      tableData: [],

    }

  },
  created() {
    this.load()
  },


  methods: {

    async load() {
      const { code, message, data }  = await  getStuClassBiaoAll({current: this.currentPage, size: this.pageSize})
      console.log(data)
      this.tableData = data.records
      this.total= Number(data.total)

    },

    // 编辑
    handleEdit(row) {
      console.log(row);
      this.form1 = { ...row }
      this.dialogVisible1 = true
    },
    // 确认修改
    async saveEdit() {
      const { code, message } = await getTwoKaoAll({
        "courseId": this.form1.courseId,
        "status": this.form1.status,
      })

      if (code == '0') {
        this.$message({
          type: "success",
          message: "更新状态成功"
        })
      } else {
        this.$message({
          type: "error",
          message: "更新状态失败"
        })
      }
      this.dialogVisible1 = false
      this.load()
    },


    handleSizeChange(pageSize ) {
      this.pageSize = pageSize;
      this.currentPage = 1;
      this.load()
    },
    async handleCurrentChange(pageNum) {
      this.currentPage = pageNum
      const { code, message, data } = await getStuClassBiaoAll({ current: pageNum, size: this.pageSize })
      console.log(data)
      this.tableData = data.records
      this.total= Number(data.total)
      this.load(); // 重新加载数据
    },
    onDaloag(row) {
      this.form1 = row
      this.dialogVisible2 = true
    }

  },
  computed: {
    ...mapGetters({
      userRole: 'user/getUserRole'
    })
  }

}
</script>

<style></style>
